<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <body>
    <a href="https://www.baidu.com" id="Btn1" >按钮1</a>
    <button id="Btn2">按钮2</button>
    <button onclick="xxx()">按钮3</button>
    <script type="text/javascript">
      /*
    事件绑定3种方式 
    1. addEventListener 方式:
        可以添加多个事件监听器
        更现代和灵活的方式
        可以通过 removeEventListener 移除
        支持事件捕获和冒泡
    2. onclick 方式:
        只能绑定一个处理函数
        新的事件处理会覆盖旧的
        写法简单直观
        只支持冒泡阶段
    3. HTML 内联方式:
        直接在 HTML 标签中写事件
        最简单但不推荐的方式
        违反了 HTML 和 JavaScript 分离的原则
        代码维护性差
        需要将函数定义在全局作用域
   */
      document.getElementById("Btn1").addEventListener("click", () => {
        alert("点击1111");
        return false
      });
      document.getElementById("Btn2").onclick = () => {
          alert("点击222");
          return false
      };
      function xxx() {
        alert("点击33");
      }
    </script>
  </body>
</html>
